<template>
    <div id="home" class="wrapper">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
         <tab-control
                :titles="['流行', '经典', '新款']"
                @tabClick="tabClick"
                ref="TabControl1" 
                class="tab-control"
                v-show="isTabFixed"
            />

        <scroll
            class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore"
        >
            <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
            <recommend :recommends="recommends" />
            <feature />
            <tab-control
                :titles="['流行', '经典', '新款']"
                @tabClick="tabClick"
                ref="TabControl2" 
            />
            <goods-list :goods="showGoods" />
        </scroll>

        <back-top @click.native="backClick" v-show="isShowbackTop" />
        <!-- <ul>
            <ul>1</ul>
        </ul> -->
    </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper";
import Recommend from "./childComps/Recommend";
import Feature from "./childComps/Feature";

import NavBar from "components/commom/navbar/NavBar";
import TabControl from "../../components/content/tabControl/TabControl.vue";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/content/backTop/BackTop.vue";
import Scroll from "components/commom/scroll/Scroll";

import { getHomeMultidata, getHomeGoods } from "network/home";
import {debounce} from 'common/utils'

export default {
    name: "Home",
    components: {
        NavBar,
        HomeSwiper,
        Recommend,
        Feature,
        TabControl,
        GoodsList,
        BackTop,
        Scroll,
    },
    data() {
        return {
            banners: [],
            recommends: [],
            goods: {
                pop: { page: 0, list: [] },
                new: { page: 0, list: [] },
                sell: { page: 0, list: [] },
            },
            currentType: "pop",
            isShowbackTop: false,
            tabOffsetTop:0,
            isTabFixed: false,
            saveY: 0
        };
    },
    computed: {
        showGoods() {
            return this.goods[this.currentType].list;
        },
    },
    destroyed(){
        console.log('sss');
    },
    activated(){
        // console.log(this.$refs.scroll.scrollTo(0, this.saveY, 0));
        this.$refs.scroll.refresh()
        this.$refs.scroll.scrollTo(0, this.saveY, 0)
    },
    deactivated(){
        // console.log(this.$refs.scroll.scroll.y);
        this.saveY = this.$refs.scroll.getScrollY()
    },
    created() {
        //1.请求多个数据
        this.getHomeMultidata();

        //2.请求商品数据
        this.getHomeGoods("pop");
        this.getHomeGoods("new");
        this.getHomeGoods("sell");

        // 3.监听item中图片加载完成
        // this.$bus.$on('itemImageLoad',() => {
        //     this.scroll && this.$refs.scroll.refresh()
        // })
    },
    mounted() {
        // 3.监听item中图片加载完成
        const refresh = debounce(this.$refs.scroll.refresh,100);
        this.$bus.$on("itemImageLoad", () => {
            refresh();
        });
        // 1.获取TabControl的tabOffsetTop
        // 所有组件都有一个属性$el:用于获取组件中的元素
        // setTimeout(() => {
        //    this.tabOffsetTop = this.$refs.TabControl.$el.offsetTop
        // },200)
    },
    methods: {
        // 防抖函数
       

        /**
         * 点击事件相关方法
         */
        tabClick(index) {
            switch (index) {
                case 0:
                    this.currentType = "pop";
                    break;
                case 1:
                    this.currentType = "new";
                    break;
                case 2:
                    this.currentType = "sell";
                    break;
            }
            this.$refs.TabControl1.currentIndex = index;
            this.$refs.TabControl2.currentIndex = index;
        },
        /**
         *网络请求相关的方法
         */
        getHomeMultidata() {
            getHomeMultidata().then((res) => {
                this.banners = res.data.banner.list;
                this.recommends = res.data.recommend.list;
            });
        },
        getHomeGoods(type) {
            const page = this.goods[type].page + 1;
            getHomeGoods(type, page).then((res) => {
                this.goods[type].list.push(...res.data.list);
                this.goods[type].page += 1;

                this.$refs.scroll.finishPullUp();
            });
        },
        // backClick() {
        //     this.$refs.scroll.scrollTo(0, 0, 500);
        // },
        contentScroll(position) {
            // 判断BackTop是否显示
            this.isShowbackTop = (-position.y) > 1000;
            // 决定tabControl是否吸顶（position：fixed）
            this.isTabFixed = (-position.y) > this.tabOffsetTop
        },
        loadMore() {
            this.getHomeGoods(this.currentType);

            // this.$refs.scroll.scroll.refresh();
        },
        swiperImageLoad(){
           this.tabOffsetTop = this.$refs.TabControl2.$el.offsetTop
        }
    },
    
};
</script>

<style scoped>
@import "../../assets/css/base.css";

#home {
    /* padding-top: 44px; */
    height: 100vh;
    position: relative;
}
.home-nav {
    background-color: var(--color-tint);
    color: #f0f0f0;

    /* 在使用浏览器原生滚动时 */
    /* position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9; */
}
.tab-control{
    position: relative;
    z-index: 9;
}
.content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
}
/* .content{
    height: calc(100% - 93px);
    overflow: hidden;
    margin-top: 44px;
} */
/* ul{
    height: 46px;
} */
</style>